<template>
    <ContentBox title="水电">
        <div class="nozi">
            <div>
                <div>
                    <div class="hl-red">
                        <span class="digiter-number digiterfontSize80 hl-red">133</span>万度
                    </div>
                    <div>
                        近七日使用
                    </div>
                </div>
                <div>
                    <div class="hl-green">
                        <span class="digiter-number digiterfontSize80 hl-green">133</span>万度
                    </div>
                    <div>
                        本月使用
                    </div>
                </div>
                <div>
                    <div class="hl-zi">
                        <span class="digiter-number digiterfontSize80 hl-zi">133</span>万吨
                    </div>
                    <div>
                        现有储水
                    </div>
                </div>
                <div>
                    <div class="hl-or">
                        <span class="digiter-number digiterfontSize80 hl-or">133</span>万吨
                    </div>
                    <div>
                        今日使用
                    </div>
                </div>

            </div>
            <div>
                <shuidian></shuidian>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import shuidian from "./ChartsComponents/shuidian"

    export default {
        name: "Preview",
        components: {
            ContentBox,
            shuidian
        }
    }
</script>

<style lang="scss" scoped>
    .nozi {
        height: 100%;
        width: 100%;
        padding: 0 40px;

        display: flex;
        flex-direction: column;
        > div {
            flex: 1;

            &:first-child {
                display: flex;
                flex-wrap: wrap;
                > div {
                    height: 50%;
                    width: 50%;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    > div {
                        &:last-child {
                            font-size: 40px;
                        }

                    }

                    &:nth-last-child(n+3) {
                        border-bottom: 1px dashed #00838F;
                    }
                    &:nth-last-child(odd) {
                        border-left: 1px dashed #00838F;

                    }

                }
            }
        }
    }
</style>

